

<template>
  <div>
    <div>订单管理</div>
    <header>
      <div class="headTop">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="">
          <el-form-item label="订单号：">
            <el-input v-model="formInline.user" placeholder="请输入订单号" clearable />
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input placeholder="请输入商品名称"></el-input>

          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="开始时间"
                clearable
            />
          </el-form-item>

        </el-form>
      </div>
      <div class="headFoot">
     <el-form class="form2" :inline="true">
       <el-form-item label="订单来源：">
         <el-select
             v-model="formInline.region"
             placeholder="请选择"
             clearable
             style="width: 180px"
         >
           <el-option label="秒杀订单" value="" />
           <el-option label="普通订单" value="" />
         </el-select>
       </el-form-item>
       <el-form-item label="支付方式：">
         <el-select
             v-model="formInline.region"
             placeholder="请选择"
             clearable
             style="width: 180px"
         >
           <el-option label="微信支付" value="" />
           <el-option label="花呗支付" value="" />
           <el-option label="银行卡支付" value="" />
         </el-select>
       </el-form-item><el-form-item label="商家：">
       <el-select
           v-model="formInline.region"
           placeholder="请选择"
           clearable
           style="width: 180px"
       >
         <el-option label="Zone one" value="shanghai" />
         <el-option label="Zone two" value="beijing" />
       </el-select>
     </el-form-item>
       <el-form-item>
         <JSL-BTN type="primary" @click="onSubmit" style="margin-right: 10px">查询</JSL-BTN>
         <JSL-BTN>重置</JSL-BTN>
       </el-form-item>
     </el-form>
      </div>
    </header>
    <main>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

        <el-tab-pane label="全部" name="first">
          <All></All>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="second">
          <All></All>

        </el-tab-pane>
        <el-tab-pane label="待收货" name="third">
          <All></All>

        </el-tab-pane>
        <el-tab-pane label="已完成" name="fourth">
          <All></All>

        </el-tab-pane>
        <el-tab-pane label="已关闭" name="five">
          <All></All>

        </el-tab-pane>
        <el-tab-pane label="待支付" name="six">
          <All></All>

        </el-tab-pane>
      </el-tabs>
<div class="btn2">
  <el-button @click="refreshPage">刷新页面</el-button>
  <el-button>刷新列表数据</el-button>
</div>
      <paging></paging>
    </main>

  </div>
</template>
<script setup>
import {useRoute} from 'vue-router'
import { reactive } from 'vue'
import Paging from "@/views/system/component/paging.vue";
import All from "@/views/order/table/all.vue"
import { ref } from 'vue'
// import All from "@/views/order/table/all.vue";
import { ElButton } from 'element-plus';
import JSLBTN from "@/components/JSL-BTN.vue";

const refreshPage = () => {
  console.log("hh")
  window.location.reload();
};

const activeName = ref('first')

const route = useRoute()
console.log(route.params.orderID)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>
<style scoped lang="scss">
header{
  background-color: white;
  display: flex;
  flex-direction: column;
  margin: 15px 0;
  padding: 10px;
  .headTop{
      display: flex;

    .demo-form-inline{
    }
  }
  .headFoot{
    display: flex;
    .form2{
      display: flex;
      justify-content: space-evenly;

    }
  }

}
main{
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  //display: flex;
  position: relative;
  .btn2{
    position: absolute;
    right: 40px;
    top: 10px;
  }
}

</style>